<template>
    <!-- icon -->
    <!-- switch -->
    <el-switch
        v-if="field.render === 'switch'"
        :loading="row.loading"
        :model-value="fieldValue"
        :active-value="field.switch_active_value"
        :inactive-value="field.switch_inactive_value"
        @change="onChangeField"></el-switch>
    <!-- user_avatar -->
    <!-- image -->
    <!-- images -->
    <!-- tag -->
    <div v-if="field.render === 'tag' && field.dict_code !== undefined">
        <el-tag :color="state.dict.getDictItemColor(field, row, field.prop)" type="info" style="--el-tag-text-color: #ffffff">
            {{ state.dict.getDictItemLabel(field, row, field.prop) }}
        </el-tag>
    </div>
    <div v-if="field.render === 'tag-state'">
        <el-tag :color="getTagStateColor(field, row)" type="info" style="--el-tag-text-color: #ffffff">
            {{ getTagStateText(field, row) }}
        </el-tag>
    </div>
    <!-- tags -->
    <div v-if="field.render === 'tags' && field.getTags && field.prop">
        <template v-for="(tag, idx) in field.getTags(row, field.prop)" :key="idx">
            <el-tag type="success">
                {{ tag.label }}
            </el-tag>
        </template>
    </div>
    <!-- url -->
    <!-- datetime -->
    <!-- color -->
    <el-select v-if="field.render === 'select'" v-model="fieldValue" placeholder="请选择" @change="onSelectChange">
        <el-option v-for="item in field.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <!-- buttons -->
    <div v-if="field.render === 'buttons' && field.buttons">
        <template v-for="(btn, idx) in field.buttons" :key="idx">
            <!-- 常规按钮 -->
            <el-button
                v-if="btn.render === 'basicButton' && (btn.display === undefined ? true: btn.display(props.row, props.field)) "
                :class="`table-operate ${btn.class}`"
                :type="btn.type"
                :disabled="btn.disabled"
                :size="btn.size"
                @click="onButtonClick(btn)">
                <SvgIcon :name="btn.icon"></SvgIcon>
                <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
            </el-button>
            <!-- 带提示信息的按钮 -->
            <el-tooltip v-if="btn.render === 'tipButton' && (btn.display === undefined ? true: btn.display(props.row, props.field)) " :content="btn.title" placement="top">
                <el-button
                    :class="`table-operate ${btn.class}`"
                    :type="btn.type"
                    :disabled="btn.disabled"
                    :size="btn.size"
                    @click="onButtonClick(btn)">
                    <SvgIcon :name="btn.icon"></SvgIcon>
                    <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
                </el-button>
            </el-tooltip>
            <!-- 带确认框的按钮 -->
            <el-popconfirm v-if="btn.render === 'confirmButton' && (btn.display === undefined ? true: btn.display(props.row, props.field)) " v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
                <template #reference>
                    <div class="ml-6">
                        <el-tooltip :content="btn.title" placement="top">
                            <el-button :class="`table-operate ${btn.class}`" :type="btn.type" :disabled="btn.disabled" :size="btn.size">
                                <SvgIcon :name="btn.icon"></SvgIcon>
                                <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
                            </el-button>
                        </el-tooltip>
                    </div>
                </template>
            </el-popconfirm>
        </template>
    </div>
    <!-- task_time -->
    <div v-if="field.render === 'task_time'">
        <template v-if="row.time_type === 'all'">
            <div>全天</div>
            <div>开始日期：{{ row.start_date }}</div>
            <div>结束日期：{{ row.end_date }}</div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { OptButton, TableColumn, TableRow } from '@/components/table/index';
import { TableColumnCtx } from 'element-plus';
import SvgIcon from '@/components/icon/index.vue';
import { TableDataState, TableDialogState, TableState } from '@/components/table/table';

interface Props {
    field: TableColumn;
    row: TableRow;
    column: TableColumnCtx<TableRow>;
    index: number;
}

const props = defineProps<Props>();

const state = inject('state') as TableState<TableDataState, TableDialogState>;
// 字段值（单元格值）
const fieldValue = props.field.prop ? props.row[props.field.prop] : '';

const onChangeField = (value: any) => {
    let action = props.field.switch_action === undefined ? 'field-change' : props.field.switch_action;
    state.onTableAction(action, { value: value, ...props });
};

const onButtonClick = (btn: OptButton) => {
    state.onTableAction(btn.action_type, props);
};

const getTagStateColor = (field: TableColumn, row: TableRow) => {
    if (field.getTagStateColor) {
        return field?.getTagStateColor(row);
    }
    return '';
};

const getTagStateText = (field: TableColumn, row: TableRow) => {
    if (field.getTagStateText) {
        return field?.getTagStateText(row);
    }
    return '';
};

const onSelectChange = (value: any) => {
    let action = props.field.select_action === undefined ? 'select-change' : props.field.select_action;
    state.onTableAction(action, { value: value, ...props });
};
</script>

<style scoped lang="scss">
.ml-6 {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.ml-6 + .el-button {
    margin-left: 6px;
}
</style>
